*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    color-scheme: light dark;
    --loadingContainer-shade-color: light-dark(hsla(0, 0%, 77%, 0.7), hsla(0, 0%, 37%, 0.7));
    --quiz-padding: 10px;
    --quiz-background-color: light-dark(hsl(40, 27%, 94%), hsl(212, 10%, 29%));
    --footer-background-color: light-dark(hsl(51, 15%, 83%), hsl(199, 17%, 32%));
    --correct-color: light-dark(green, hsl(120, 78%, 55%));
    --incorrect-color: light-dark(red, hsl(0, 77%, 57%));
    --background-color: light-dark(hsl(50, 19%, 88%), hsl(200, 5%, 22%));
    --text-color: light-dark(black, white);
    --link-color: light-dark(hsl(240, 100%, 44%), hsl(177, 100%, 91%));
    --link-visited-color: light-dark(hsl(261, 100%, 24%), hsl(62, 100%, 74%));
    --link-active-color: light-dark(hsl(0, 68%, 29%), white);

    --star-color: light-dark(hsl(0, 0%, 71%), hsl(0, 0%, 89%));
    --filled-star-color: yellow;

    --score-container-color: light-dark(hsl(39, 79%, 69%), rgb(15, 66, 133));
    --score-container-text-color: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));

    --range-output-border-color: light-dark(hsl(263, 15%, 23%), hsl(200, 52%, 94%));
}

body {
    font-family: "Liberation Sans", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    color: var(--text-color);
}

button {
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

button:disabled {
    cursor: default;
}

label {
    white-space: pre-wrap;
    /* Wrap newlines in text */
}

fieldset > label > input {
    margin-right: 10px;
}

a {
    color: var(--link-color);
}

a:active {
    color: var(--link-active-color);
}

a:visited {
    color: var(--link-visited-color);
}

.main {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-grow: 1;
}

.dialog p {
    white-space: pre-wrap;
}

.loadingContainer {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: calc(100% + var(--quiz-padding));
    height: clamp(300px, 100%, 100%);
    padding: 10px 0;
    position: absolute;
    top: 0;
    left: calc(0px - var(--quiz-padding));
    background-color: var(--loadingContainer-shade-color);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 99;
}

.loadingCircle {
    width: 100px;
    height: 100px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 4px solid gray;
    border-top: 4px solid lightskyblue;
    animation: 2s cubic-bezier(0.4, 0.3, 0.5, 0.7) infinite spin;
    /* We got that spin eyyy */
}

.loadingText {
    text-align: center;
    font-size: 2rem;
    font-family: "Noto Sans", sans-serif;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.star::before,
.filledStar::before {
    content: "★";
    font-family: monospace;
    font-size: 50px;
}

.star::before {
    color: var(--star-color);
}

.filledStar::before {
    color: var(--filled-star-color);
}

.scoreContainer {
    width: fit-content;
    float: right;
    background-color: var(--score-container-color);
    margin-top: 5px;
    padding: 5px 10px;
    color: var(--score-container-text-color);
    border-radius: 8px;
    font-size: 1.5rem;
    position: relative;

    &.retake {
        position: relative;
        clear: right;
        top: 5px;
        right: 0;
        font-size: 1rem;
    }
}

.hidden {
    display: none;
}

.metadataHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.metadataName {
    text-align: center;
    font-size: 3rem;
}

.metadataList {
    list-style-type: none;
}

.metadataList > li:not(.difficultyContainer) {
    position: relative;
    z-index: 1;
}

.difficultyContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.difficultyContainer div {
    line-height: 0.4;
}

.questions {
    display: grid;
    grid-auto-columns: max-content;
    position: relative;
    padding: 10px;
}

.questions:has(.rangeContainer) {
    display: grid;
    grid-auto-columns: 0.5fr;
    position: relative;
    padding: 10px;
    place-content: center;
    min-height: 200px;
}

.correct {
    border-color: var(--correct-color);
}

.correct::after {
    content: "✓";
    color: var(--correct-color);
}

.incorrect {
    border-color: var(--incorrect-color);
}

.incorrect::after {
    content: "✗";
    color: var(--incorrect-color);
}

.correct::after,
.incorrect::after {
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 30px;
}

.dialog {
    margin: auto auto;
    border-radius: 25px;
}

.dialogForm {
    padding: 3rem;
}

.groupItem > *:not(.groupTitle) {
    /* Select all but title element */
    margin-left: 2rem;
}

/* Range ticks: All logic and magic credit to https://codepen.io/vsync/pen/mdEJMLv */

.rangeContainer {
    --ticksThickness: 2px;
    --ticksHeight: 30%;
    --ticksColor: silver;
    --ticks-gap: -4px;
    --thumb-size: 20px;
    --max-ticks: 500;

    --ticks-count: Calc(var(--range-max) - var(--range-min)) / var(--range-step);
    --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--max-ticks), 0));
    --x-step: Max(var(--range-step), var(--too-many-ticks) * (var(--range-max) - var(--range-min)));
    --tickIntervalPercent: calc((100% - var(--thumb-size)) / ((var(--range-max) - var(--range-min)) / var(--x-step)));

    display: inline-block;
    background: linear-gradient(to right, var(--ticksColor) var(--ticksThickness), transparent 1px) repeat-x;
    /*               calc((100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1) ); */
    background-size: var(--tickIntervalPercent) var(--ticksHeight);
    background-position-x: calc(var(--thumb-size) / 2 - var(--ticksThickness) / 2);
    background-position-y: bottom;
    position: relative;
    width: clamp(200px, 50vw, 900px);
    height: max-content;
}

/* min / max labels at the edges */
.rangeContainer::before,
.rangeContainer::after {
    --offset: calc(var(--thumb-size) / 2);

    display: block;
    content: counter(x);
    position: absolute;
    bottom: -2.5ch;
    transform: translateX(calc(10% * var(--before, -1) * -1));
}

.rangeContainer::before {
    --before: 1;
    counter-reset: x var(--range-min);
    left: var(--offset);
}

.rangeContainer::after {
    counter-reset: x var(--range-max);
    right: var(--offset);
}


.rangeContainer > input {
    width: 100%;
}

.rangeContainer output {
    --value-a: Clamp(var(--range-min), var(--range-value), var(--range-max));
    --completed-a: calc((var(--value-a) - var(--range-min)) / (var(--range-max) - var(--range-min)) * 100);
    --x-offset: calc(var(--completed-a) * -1%);
    --position: calc(((var(--range-value) - var(--range-min)) / (var(--range-max) - var(--range-min))) * 100%);

    position: absolute;
    padding: 2px 6px;
    left: var(--position);
    transform: translate(var(--x-offset), calc(-150% + var(--ticks-gap) * (-1)));
    white-space: nowrap;

    border: 1px solid var(--range-output-border-color);
    border-radius: 5px;
}

/* Range ticks end */

.rangeContainer + label {
    text-align: center;
    padding-top: 20px;
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--footer-background-color);
    padding: 5px 0;
}

a[target="_blank"]::after {
    content: "";
    -webkit-mask-image: url("../img/icons8-new-tab.svg");
    -webkit-mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("../img/icons8-new-tab.svg");
    mask-position: 50%;
    mask-repeat: no-repeat;
    background-color: currentColor !important;
    padding: 0 7px;
    margin: 2px;
}

#content {
    background-color: var(--quiz-background-color);
    padding: 0 var(--quiz-padding);
    visibility: hidden;
    position: relative;
    flex-grow: 1;
}

#content input {
    cursor: pointer;
}

#content label:has(input[type="checkbox"], input[type="radio"]) {
    cursor: pointer;
}

#content label:not(:has(input[type="checkbox"], input[type="radio"])) {
    cursor: text;
}

#buttonGroup {
    padding: 5px;
}

#selectionHeader,
#quizSelect {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    width: 100%;
}

#title {
    text-align: center;
}

#options {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

#quizSelect > h2,
#options > h2 {
    text-align: center;
    flex-basis: 100%;
}

#fileInputContainer {
    display: none;
}

#quizSelectionContainer {
    display: block;
}

#selectionModeContainer {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}